import './style.less'
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
import { VertexNormalsHelper } from 'three/examples/jsm/helpers/VertexNormalsHelper.js';

const container = document.getElementById('app');

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);


const renderer = new THREE.WebGLRenderer({
    antialias: true
});   

renderer.setSize(window.innerWidth, window.innerHeight);          
    
container.appendChild(renderer.domElement); 
camera.position.z = 5;

const controls = new OrbitControls(camera, renderer.domElement);            
controls.enableDamping = true;

const axesHelper = new THREE.AxesHelper(2);
scene.add(axesHelper);

const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);

const light = new THREE.AmbientLight(0xffffff, 10);
scene.add(light);

const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ 
    color: 0xffffff ,
    // emissive: 0xff0000,
    // wireframe: true,
    // vertexColors:true
});
const mesh = new THREE.Mesh(boxGeometry, material);
mesh.rotation.x = Math.PI / 4;
mesh.scale.x=3;
scene.add(mesh);
console.log("box",mesh);
// //法向量帮助器
// const normalHelper = new VertexNormalsHelper(mesh, 0.5);
// scene.add(normalHelper);

// //包围盒帮助器
// const boxHelper = new THREE.BoxHelper(mesh, 0xffff00);
// scene.add(boxHelper);

//计算包围盒//box3帮助器
mesh.geometry.computeBoundingBox();
const box = mesh.geometry.boundingBox;
console.log("box",box);
mesh.updateMatrixWorld(true,true);
box.applyMatrix4(mesh.matrixWorld);
const box3Helper = new THREE.Box3Helper(box, 0xffff00);
scene.add(box3Helper);


const bufferGeometry = new THREE.BufferGeometry();
// 创建一个简单的矩形. 在这里我们左上和右下顶点被复制了两次。
// 因为在两个三角面片里，这两个顶点都需要被用到。
const vertices = new Float32Array([
	-1.0, -1.0,  1.0,
	 1.0, -1.0,  1.0,
	 1.0,  1.0,  1.0,

	 1.0,  1.0,  1.0,
	-1.0,  1.0,  1.0,
	-1.0, -1.0,  1.0
]);
const colors = new Float32Array([   
	// 左上角
	1.0, 0.0, 0.0,
	0.0, 1.0, 0.0,
	1.0, 0.0, 1.0,
	// 右上角
	0.0, 1.0, 1.0,
	1.0, 1.0, 0.0,
	0.0, 1.0, 0.0,
]);

// itemSize = 3 因为每个顶点都是一个三元组。
bufferGeometry.setAttribute( 'position', 
    new THREE.BufferAttribute( vertices, 3 ) );
bufferGeometry.setAttribute( 'color', 
    new THREE.BufferAttribute( vertices, 3 ) );

const mesh1 = new THREE.Mesh(bufferGeometry, material);
mesh1.position.x=1;
scene.add(mesh1);
console.log(mesh1);

//画平面
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshStandardMaterial({
    color: 0x00ff00,
    // wireframe: true
});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.position.x = -1;
scene.add(plane);
console.log(plane);




function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}

animate();

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);

//创建全屏按钮
const fullscreenButton = document.createElement('button');
fullscreenButton.textContent = '全屏';
fullscreenButton.style.position = 'absolute';
fullscreenButton.style.top = '10px';
fullscreenButton.style.right = '10px';
fullscreenButton.style.zIndex = '1';

function toggleFullscreen() {
    if(fullscreenButton.textContent == '全屏') {
        if (container.requestFullscreen) {
            container.requestFullscreen();
        } else if (container.webkitRequestFullscreen) {
            container.webkitRequestFullscreen();
        } else if (container.mozRequestFullScreen) {
            container.mozRequestFullScreen();
        } else if (container.msRequestFullscreen) {
            container.msRequestFullscreen();
        }
        fullscreenButton.textContent = '退出全屏'
    }else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
        fullscreenButton.textContent = '全屏'
    }
}

fullscreenButton.addEventListener('click', toggleFullscreen);
container.appendChild(fullscreenButton);


//lil-gui面板
const guiOptions = {
    fullScreen:function(){
        let container = document.body;
        if (container.requestFullscreen) {
            container.requestFullscreen();
        } else if (container.webkitRequestFullscreen) {
            container.webkitRequestFullscreen();
        } else if (container.mozRequestFullScreen) {
            container.mozRequestFullScreen();
        } else if (container.msRequestFullscreen) {
            container.msRequestFullscreen();
        }
    },
    exitFullScreen:function(){
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
    }
}
const gui = new GUI();
const folder = gui.addFolder('操作');
folder.add(guiOptions, 'fullScreen').name('全屏');
folder.add(guiOptions, 'exitFullScreen').name('退出全屏');
folder.open();

const folder1 = gui.addFolder('物体1');
folder1.add(mesh1.position, 'x').min(-5).max(5).step(0.1).name("x轴位置");
folder1.add(mesh1.position, 'y').min(-5).max(5).step(0.1).name("y轴位置");
folder1.add(mesh1.position, 'z').min(-5).max(5).step(0.1).name("z轴位置");
folder1.open();
